import { defineComponent, onMounted, reactive, Ref, ref, unref } from 'vue';
import { useUserInfoStore } from '@/domain/authority/hooks/login';
import PageTable from '../components/pageTable';
import { Button, Input, message, Modal, Pagination, Popconfirm, Popover, Table, TableColumn } from 'ant-design-vue';
import { Download, ReqParam, ResData } from '@/domain/dataBoard/types/downLoad';
import { useDownloadData } from '@/domain/dataBoard/hooks/download';
import { deleteDownload } from '@/domain/dataBoard/api/download';
import { OpButton, OpButtonKey } from '@/domain/dataBoard/types/downLoad';
import { Page } from '@/domain/common/types/page';
import { Key } from 'ant-design-vue/lib/table/interface';
export default defineComponent({
  name: 'headers',
  props: {
    isOpen: {
      type: Boolean,
      default: false
    },
    changeOpenStatus: {
      type: Function,
      default: () => {}
    }
  },
  setup(props, { slots }) {
    const deleteLoading = ref(false);
    const searchStr = ref('');
    const {
      dataSource,
      IDString,
      columnlist,
      selectRows,
      rowlist,
      paging,
      searchParam,
      searchList,
      setSizeChange,
      loadTable,
      getSelectRowsCallBack,
      reloadList
    } = useDownloadData();
    onMounted(() => {});
    const selectKey: Ref<Array<Key>> = ref([]);
    const rowSelection = {
      selectedRowKeys: selectKey,
      onChange: (selectedRowKeys: Array<Key>, selectedRows: any) => {
        selectKey.value = selectedRowKeys;
        getSelectRowsCallBack(selectedRowKeys as number[], selectedRows);
      }
    };
    const deletes = async () => {
      deleteLoading.value = true;
      const rows = selectRows.value;
      if (rows.selectKey && rows.selectKey.length > 0) {
        await deleteDownload(rows.selectKey?.join(','));
      }
      deleteLoading.value = false;
    };
    return () => (
      <Modal
        class={''}
        onCancel={() => {
          props.changeOpenStatus(false);
        }}
        visible={props.isOpen}
        width="70rem"
        title={'离线任务列表'}
        footer={null}
      >
        <div class={'mt-4 mb-2'}>
          <Input
            style={{ width: '10rem' }}
            value={searchStr.value}
            onChange={(e) => {
              searchStr.value = e.target.value!;
            }}
            placeholder={'请输入文件名关键字'}
          ></Input>
          <Button
            class={'inline-block ml-4 mr-4 '}
            type="primary"
            style={{ borderRadius: '4px' }}
            onClick={async () => {
              (
                searchParam as Partial<
                  {
                    file_name: string;
                  } & Page
                >
              ).file_name = searchStr.value;
              await reloadList();
            }}
          >
            查询
          </Button>
          <Popconfirm title={`确定批量删除?`} ok-text="是" cancel-text="否" onCancel={() => {}} onConfirm={deletes}>
            <Button loading={deleteLoading.value}> 批量删除</Button>
          </Popconfirm>
        </div>
        <Table dataSource={dataSource.value} rowSelection={rowSelection} rowKey={IDString} pagination={false} bordered>
          {columnlist.value
            ? columnlist.value.map((node, idx) => {
                return (
                  <TableColumn
                    title={node.label}
                    dataIndex={node.prop}
                    sorter={node.sortable ? { compare: (a: any, b: any) => (a[node.prop!] = b[node.prop!]), multiple: idx } : node.sortable}
                  ></TableColumn>
                );
              })
            : null}
          <TableColumn
            title={'操作'}
            dataIndex={'opGroup'}
            customRender={(opt) => {
              const { record } = opt as { record: Download & { id: string; opGroup: Array<OpButton> } };
              if (!record.opGroup) {
                return <></>;
              }
              const rows = record.opGroup.map((val) => {
                return (
                  <>
                    {val.key === OpButtonKey.download ? (
                      <a download href={record.url} style={{ color: '#4487FA', margin: '0 8px 0 0' }}>
                        {val.value}
                      </a>
                    ) : null}
                    {val.key === OpButtonKey.delete ? (
                      <Popconfirm
                        title="确定删除?"
                        ok-text="是"
                        cancel-text="否"
                        onConfirm={async () => {
                          const res = await deleteDownload(record.id);
                          if (res.code === 0) {
                            message.success(res.msg!);
                          }
                        }}
                      >
                        <span style={{ color: '#4487FA', margin: '0 8px 0 0' }}>{val.value}</span>
                      </Popconfirm>
                    ) : null}
                  </>
                );
              });
              return {
                children: rows
              };
            }}
          ></TableColumn>
        </Table>
        <div class="text-right mt-5" style={{ display: 'flex', justifyContent: 'center' }}>
          <Pagination
            total={paging.value.total}
            current={paging.value.page}
            pageSize={paging.value.pageSize}
            showSizeChanger={false}
            showTotal={() => <div>共{paging.value.total}条</div>}
            onChange={(current: number, pageSize: number) => {
              selectKey.value = [];
              setSizeChange(current, pageSize);
            }}
          ></Pagination>
        </div>
      </Modal>
    );
  }
});
